<template>
  <div class="project-list">
    <JLForm
      ref="formRef"
      class="search-from"
      :form-config="formConfig"
      :form-data="formData"
      :form-item-config="formItemConfig"
    >
      <template #searchSlot>
        <el-button color="#0560FD" @click="search"> 查询 </el-button>
      </template>
    </JLForm>
    <div class="main-option">
      <el-button class="up-resource" color="#0560FD" @click="onEdit(null)">
        <SvgIcon icon-class="ic_+" style="font-size: 19px; margin-right: 5px" />新增项目</el-button
      >
    </div>
    <JLDatagrid
      class="data-grid-table"
      :data="tableData"
      :table-config="tableConfig"
      :column-config="tableColumn"
      :page-config="pageConfig"
      @pageCurrentChange="pageCurrentChange"
      @pageSizeChange="pageSizeChange"
    >
      <template #slotOperation="{ row }">
        <div class="table-btn-wrap">
          <el-button type="text" class="btn" @click="onEdit(row)">编辑</el-button>
          <el-button type="text" class="btn" @click="onDelete(row)">删除</el-button>
          <el-switch
            :value="row.state"
            @click="changeState(row)"
            style="margin-left: 10px"
            active-text="启用"
            inline-prompt
            inactive-text="停用"
            :active-value="1"
            :inactive-value="0"
          />
        </div>
      </template>
    </JLDatagrid>
    <Total :num="pageConfig.total" />
    <CreateDialog :project="selRow" v-if="createDialogShow" @close-handle="handle"></CreateDialog>
  </div>
</template>

<script setup lang="ts">
import { blockUpProject, deleteProject, enableProject } from '@/api/project';
import { IProject } from '@/api/project/types';
import Total from '@/components/pagination/total.vue';
import { confirmAgain, messageAlert } from '@/utils';
import CreateDialog from '@/views/project/create/index.vue';
import { JLDatagrid, JLForm } from '@jl/element-plus';
import { messageUtil } from '@jl/element-plus/utils';
import { list } from './composables/list';

defineOptions({
  name: '',
});
const selRow = ref<null | IProject>(null);
const createDialogShow = ref(false);

const {
  formRef,
  formConfig,
  formData,
  formItemConfig,
  tableRef,
  pageConfig,
  tableConfig,
  tableColumn,
  tableData,
  search,
  pageCurrentChange,
  pageSizeChange,
} = list();

onMounted(() => {
  search();
});

function handle() {
  createDialogShow.value = false;
  search();
}

function onEdit(row: any) {
  if (row && !row.state) {
    messageAlert('停用状态无法编辑', '请先启用项目', 'error');
    return;
  }
  createDialogShow.value = true;
  selRow.value = row;
}

async function onDelete(row: any) {
  const flag = await confirmAgain('确认删除这个项目？', '删除操作不可逆，确定是否删除？');
  if (!flag) return;
  deleteProject({ id: row.id })
    .then(() => {
      messageUtil.success('删除成功');
      search();
    })
    .catch(() => {
      messageUtil.success('该项目存在已发布的场景，请取消发布后再进行删除操作');
    });
}

async function onChange(row: any) {
  if (row.status) {
    await blockUpProject({ id: row.id });
  } else {
    await enableProject({ id: row.id });
  }
  messageUtil.success('切换成功');
  search();
}

const changeState = async (row: any) => {
  if (row.state) {
    const flag = await confirmAgain(
      '确认将这个项目停用？',
      '停用后该项目场景内容将下线，该项目场景将不能再调用和查看？'
    );
    if (!flag) return;
  }
  onChange(row);
};
</script>

<style lang="less" scoped>
.project-list {
  position: relative;

  :deep(.total) {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}

.data-grid-table {
  height: calc(100% - 100px);
}
</style>
